/*
 * @Description: 
 * @Author: Sun
 * @Date: 2019-10-16 21:48:23
 * @LastEditors: Sun
 * @LastEditTime: 2019-10-17 22:11:29
 */

import React, { Component, Fragment } from 'react'
import './style.css'
import XiaojiejieItem from './XiaojiejieItem'
class Xiaojiejie extends Component {
  //js的构造函数，由于其他任何函数执行
  constructor(props) {
    super(props) //调用父类的构造函数，固定写法
    this.state = {
      inputValue: '', // input中的值
      list: ['基础按摩', '精油推背']      //服务列表
    }
  }
  
  render() {
    return (
      <div>
        {/*第一次注释 */}
        <div>
          <label htmlFor="jspang">加入服务：</label>
          <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
          <button onClick={this.addList.bind(this)}> 增加服务 </button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return (
                <div>
                  <XiaojiejieItem />
                  {/*
                  <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}}
                  >
                  </li>
                  */
                  }
                </div>
            
              )
            })
          }
        </ul>  
      </div>
    )
  }
  inputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  //增加服务的按钮响应方法
  addList() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  //删除单项服务
  deleteItem(index) {
    // let list = this.state.list
    let list = JSON.parse(JSON.stringify(this.state.list)) //深度拷贝state
    list.splice(index, 1)
    this.setState({
      list: list
    })

  }
}
export default Xiaojiejie 